<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的 重置样式 -->
		<link href="../css/reset.css" rel="stylesheet" type="text/css" />
		<style>
			/* css 定义变量 */
			:root {
				--bgcolor: #aaff00;
			}



			body {
				font-size: 12px;
				font-family: 'Microsoft YaHei', "宋体";

			}

			/* 头部 start */
			.banner {
				background-color: rgb(244, 244, 244);
				width: 100%;
				height: 29px;
			}

			/* 居中 */
			.banner .topBar {
				/* background-color: blue; */
				height: 29px;
				width: 1200px;
				margin: 0 auto;
				line-height: 29px;
			}

			.banner .topBar .right {
				float: right;
			}



			/* 头部 end  */

			/* 搜索框 stat */
			.searchWrapper {
				width: 1200px;
				margin: 0 auto;
				margin-top: 20px;
				height: 100px;
				/* background-color: antiquewhite; */

			}

			.searchWrapper .searchBox {
				display: inline-block;
				vertical-align: top;
				width: 500px;
				height: 64px;
				margin-left: 100px;
				/* background-color: #aaff00; */
			}

			.searchWrapper .searchBox .searchForm {
				height: 48px;
				background-color: #ff5500;
			}

			.searchWrapper .searchBox .searchForm .input {
				border: solid 3px red;
				box-sizing: border-box;
				outline: none;
				width: 400px;
				height: 45px;
			}

			.searchWrapper .searchBox .searchForm .btn {
				vertical-align: top;
				border: none;
				height: 45px;
				width: 100px;
				background-color: red;
				color: white;
				letter-spacing: 20px;
				font-size: 1.3em;
				font-weight: 900;
			}


			.searchWrapper .searchBox .searchhot {
				height: 16px;
				background-color: aliceblue;
			}

			.searchWrapper .searchBox .searchhot span:nth-child(1) {
				color: rgb(89, 59, 7);

			}

			.searchWrapper .searchBox .searchhot a:hover {
				text-decoration: underline solid #f60;
			}

			.searchWrapper .searchCart {
				vertical-align: top;
				/* background-color: #ff5500; */
				width: 140px;
				height: 40px;
				float: right;
				padding-left: 50px;
				/* border: solid 1px red; */
				background-image: url('https://www.youlu.net/images/home/cart.jpg');
				background-repeat: no-repeat;
				background-position: left center;
			}

			.searchWrapper .searchCart .cartNums {
				height: 20px;
				line-height: 20px;
			}

			.searchWrapper .searchCart .cartNums a {
				color: #593b07;
			}

			.searchWrapper .searchCart .cartNums a:hover {
				color: #593b07;
				text-decoration: underline solid #ff6600;
			}

			.searchWrapper .searchCart .cartNums a span {
				color: #ff0000;
				font-size: 1.5em;
				font-weight: 800;
			}

			/* 搜索框 end */

			/**导航  start*/
			.navWapper {
				background-color: #ff0000;
				width: 100%;
				height: 39px;

			}

			.navWapper .navItem {
				width: 1200px;
				height: 39px;
				margin: 0 auto;
				/**居中*/
			}


			.navWapper .navItem>ul>li {
				display: inline-block;
				height: 39px;
				line-height: 39px;
				width: 90px;
				text-align: center;
				cursor: pointer;
				font-size: 1.3em;
				font-weight: bold;
				color: white;
			}

			.navWapper .navItem>ul>li:hover {
				background-color: rgb(201, 0, 0);
			}

			.navWapper .navItem>ul>li:nth-child(1) {
				width: 185px;
				text-align: left;
				background-color: rgb(201, 0, 0);
				padding-left: 15px;
			}

			/**导航  end*/



			/***具体内容 start **/
			.contentWrapper {
				height: 950px;
				width: 1200px;

				margin: 0 auto;
				/**居中*/
			}

			.contentWrapper .content_item {
				float: left;
			}

			.contentWrapper .left {
				width: 200px;
				height: 100%;
				/* background-color: aqua; */

				border: 1px solid #dcdcdc;

			}

			.contentWrapper .left .block {
				border-bottom: 1px solid #dcdcdc;
				padding: 5px 5px 10px 25px;

			}

			.contentWrapper .left .block:hover {
				color: white;
				background-color: #ff0000 !important;
				cursor: pointer;
			}

			.contentWrapper .left .block:hover a {
				color: white;
			}



			.contentWrapper .left .block h1 {
				margin-bottom: 5px;
			}

			.contentWrapper .left .block .cateWrapper a {
				display: inline-block;
				margin: 0 3px 3px 0;
			}

			 .contentWrapper .right {
				width: calc(100% - 200px );
				/* background-color: cornflowerblue; */
			}


			.contentWrapper .right .swipperWrapper .item{
				float: left;
			
				/* height: 300px; */
				border: solid 1px red;
			}


			.contentWrapper .right .swipperWrapper  .left{
				width: 760px;
			}
			.contentWrapper .right .swipperWrapper  .left .swipper img{
				width: 750px;
				height: 345px;
			}
			
			.contentWrapper .right .swipperWrapper  .left .swipper>div>span{
				display: inline-block;
				height: 26px;
				width:26px;
				text-align: center;
				font-size: 13px;
				line-height: 26px;
				color: white;
				font-weight: 700;
				border-radius: 13px;
				cursor: pointer;
				background-color: rgba(0,0,0,0.5);
				margin: 0 3px;
				
			}
			
			.contentWrapper .right .swipperWrapper  .left .swipper>div>span:hover{
				background-color: #ff0000;
			}
									
			
			.contentWrapper .right .swipperWrapper .right{
				width: 240px;
			}

			/***具体内容 end **/
			
			
			
			
			
			
			
			/* 推荐图书 start  */
			.contentWrapper .right .swipperWrapper .recommended-container{
				height: 530px;
				margin-top: 10px;
			}
			.contentWrapper .right .swipperWrapper .recommended-container .recommended-c-list{
				float: left;
				height: 530px;
				
				
			}
			
			.contentWrapper .right .swipperWrapper .recommended-container .btn{
				width: 40px;
			}
			
			
			.contentWrapper .right .swipperWrapper .recommended-container .recommended-c-list:nth-child(2){
				width: 670px;
				/* background-color: #dcdcdc; */
			}
			
			
			.contentWrapper .right .swipperWrapper .recommended-container .recommended-c-list .book_detail{
				width: 160.5px;
				height: 261px;
				/* background-color: #593b07; */
				/* border: solid 1px #666; */
				float: left;
				margin: 2px 3.5px
				
				
			}
			
			
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .pic{
				height:180px ;
				/* background-color: #aaff00; */
			}
			
				.contentWrapper  .recommended-container .recommended-c-list .book_detail .pic img{
					width: 100%;
					height: 100%;
				}
			
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .name a:hover{
				text-decoration: underline solid #f60;
			}
			
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .author{
				margin-top: 10px;
				color: rgb(153,153,153);
				
			}
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .price{
				margin-top: 5px;
				
			}
			
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .price span:nth-child(1){
				font-size: 14px;
				font-weight: 700;
				color: #af0000;
			}
			
			.contentWrapper  .recommended-container .recommended-c-list .book_detail .price span:nth-child(2){
				text-decoration: line-through solid rgb(156,156,156);
				color: rgb(156,156,156);
				margin-left: 20px;
			}
			
			/* 推荐图书 end   */
			
			
			
			
			
			
			
			
			
			
			
		</style>
	</head>
	<body>


		<div class="banner">
			<div class="topBar">
				<span>您好，欢迎光临有路网！</span>
				<span class="right">
					<a href="#"> 请登陆 </a>
					<a href="#">免费注册</a>|
					<a href="#">我的有路</a>|
					<a href="#">我要开店</a>|
					<a href="#">有路公众号</a>|
					<a href="#">团购批发</a>|
					<a href="#">客服服务</a>|
					<a href="#">您好，欢迎光临有路网！</a>
				</span>
			</div>

		</div>


		<div class="searchWrapper">


			<img src="https://www.youlu.net/images/home/logo.jpg?v=0.3" />

			<div class="searchBox">
				<div class="searchForm">

					<input type="text" class="input" placeholder="书名"><button class="btn" type="button">搜索</button>

				</div>

				<div class="searchhot"><span>热门搜索:</span>
					<a href="#">高等数学（第七版）</a>
					<a href="#">计算机网络</a>
					<a href="#">管理学</a>
					<a href="#">大学英语</a>

				</div>

			</div>

			<div class="searchCart">
				<div class="cartNums"> <a href="#">网站购物车<span>0</span>本</a></div>
				<div class="cartNums"> <a href="#">店铺购物车<span>0</span>本</a></div>
			</div>

		</div>


		<div class="navWapper">
			<div class="navItem">
				<ul>
					<li>全部图书分类</li>
					<li>首页</li>
					<li>旧书回收</li>
					<li>分类</li>
					<li>入驻书店</li>
					<li>文具</li>

				</ul>


			</div>
		</div>


		<div class="contentWrapper">
			<div class="content_item left">
				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>


					</div>

				</div>



				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>


					</div>

				</div>


				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>

					</div>

				</div>


				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>

					</div>

				</div>

				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>

					</div>

				</div>

				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>

					</div>

				</div>
				<div class="block">
					<h1>经济管理</h1>
					<div class="cateWrapper">

						<a href="">市场营销 </a>
						<a href="">经济学理论 </a>
						<a href="">国际贸易 </a>
						<a href="">物流管理 </a>
						<a href="">管理学原理 </a>
						<a href="">财务管理</a>

					</div>

				</div>
			</div>
			<div class="content_item right">
				
				<div class="title">
					如何购买 | 如何支付 | 旧书缺货怎么办 | 配送方式与配送费 | 普通会员与VIP会员 | 有路积分说明 | 有路礼券说明 | 账户余额说明 | 退款退货说明 | 电子书购买说明
				</div>
				<div class="swipperWrapper">
					
					<div class="item left">
						
						<div class="swipper" style="position: relative;">
							
							<img src="https://img1.youlu.net/pic/flash/202305271113211321.jpg" alt="图片丢失" title="清凉夏季">
							
							
							<div style="position: absolute;right: 10px ;bottom:10px;">  
								
								<span>1</span>
								<span>2</span>
								<span>1</span>
								<span>1</span>
								<span>1</span>
								<span>1</span>
								<span>7</span>
								
							</div>
							
						</div>
						
						<div style="padding: 2px 20px;padding-left: 40px;background-image:url('https://www.youlu.net/images/home/bugle.jpg') ;
								background-repeat: no-repeat;background-position: 20px center;
						">
							<span style="font-size: 20px;font-weight: bold;">推荐图书</span>
							
							<div style="float: right;font-size: 14px;color: #999;font-weight: 700;"><span style="color:rgb(205,0,1)">1</span>/3</div>
							
						</div>
						
						
						
						
					<div  style="padding: 0 10px;">	<hr></div>
						
					<div class="recommended-container"> 
					
					
						<div class="recommended-c-list btn"></div>
						<div class="recommended-c-list">
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							<div class="book_detail">
								<div class="pic"><img src="https://img7.youlu.net/bookpic/l/126/4045126a68aff.jpg-n" alt=""></div>
								<div class="name"><a href="#">哈佛凌晨四点半</a></div>
								<div class="author">韦秀英</div>
								<div class="price"> <span>¥11.00</span> <span>¥28.00</span>   </div>
								
								
							</div>
							
							
							
						
							
							
							
							
						</div>
						<div class="recommended-c-list btn"></div>
					
					
					
					
					</div>	
						
						
						
						
						
						
						
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						
						
					</div>
					<div class="item right"></div>
				</div>
				<div class="black">


				</div>


			</div>

		</div>

		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>
		后续.... <br>






	</body>
</html>